<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content category">
                <div class="panel-body">
                    <div class="cms-btn-group">
                        <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                    </div>
                    <el-tag style="margin:0 10px 15px 0"
                            :key="index"
                            v-for="(cate,index) in listData"
                            closable
                            :disable-transitions="false"
                            @close="destroy(cate.id)">
                        {{cate.name}}
                    </el-tag>
                    <el-input
                            class="input-new-tag"
                            v-if="addInput"
                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small" style="width: 115px"
                            @keyup.enter.native="update"
                            @blur="update">
                    </el-input>
                    <el-button v-else @click="create" type="primary" icon="fa fa-plus" size="small"> 新增</el-button>
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {CategoryList,CategoryUpdate,CategoryDestroy} from '@/utils/request';
    export default {
        data() {
            return {
                listData: [],//列表数据
                addInput:false,
                inputValue:'',
            }
        },
        activated(){
            this.list();
        },
        methods: {
            //新增
            create() {
                this.addInput = true;
                this.$nextTick(() => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            //列表
            list(){
                this.$store.dispatch('setLoading', true);
                CategoryList({params: this.params}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.listData = res.data;
                    }
                    this.$store.dispatch('setLoading', false);
                })
            },
            //更新
            update(){
                let inputValue = this.inputValue;
                if (inputValue) {
                    CategoryUpdate({name:inputValue}).then((res) => {
                        if (res.code) {
                            this.$message.error(res.msg);
                        } else {
                            this.addInput = false;
                            this.inputValue = '';
                            this.listData.push({id:res.id,name:inputValue})
                        }
                    });
                }else{
                    this.addInput = false;
                    this.inputValue = '';
                    this.$message.error('请填写维修类别名称');
                }
            },
            //删除
            destroy(id){
                this.$confirm('确定要删除该维修类别吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    CategoryDestroy({id: id}).then((res) => {
                        if (res.code) {
                            this.$message.error(res.msg);
                        } else {
                            this.list();
                        }
                    });
                }).catch(() => {});
            },
        }
    }
</script>

<style scoped>

</style>
